<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>拉勾教育</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"
            crossorigin="anonymous"></script>
    <script src="../js/common.js"></script>
</head>
<body>

<div align="center">
    <img src="../img/pay.png" height="465" width="490" usemap="#buttonmap"/>
    <map name="buttonmap" id="buttonmap">
        <area id="payButton" shape="rect" coords="194,378,298,410" href="#"/>
    </map>
</div>
<script>

    $(document).ready(function () {
        $("#payButton").click(function () {
            var orderId = getUrlParameter("orderId");
            $.post("http://localhost:8080/payment", {userId: 1, orderId: orderId}, function (payStatus) {
                if (payStatus != null && payStatus != "") {
                    if (payStatus == 1) {
                        window.location.href="paySuccess.html";

                    } else if (payStatus == 2) {
                        alert("支付失败");
                        window.location.href="payFailed.html?orderId=" + orderId;

                    } else if (payStatus == 3) {
                        alert("重复支付");
                        window.location.href="payFailed.html?orderId=" + orderId;
                    }
                }
            });
        });
    })

</script>
</body>
</html>